import { computed } from 'vue'

const backgroundImages = {
  home: 'https://images.unsplash.com/photo-1504384308090-c894fdcc538d?q=80&w=1920&auto=format&fit=crop',
  about: 'https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?q=80&w=1080&auto=format&fit=crop',
  services: 'https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?q=80&w=1080&auto=format&fit=crop',
  team: 'https://images.unsplash.com/photo-1522071820081-009f0129c71c?q=80&w=1080&auto=format&fit=crop'
}

export function usePageBackground(pageName) {
  const backgroundImage = computed(() => backgroundImages[pageName] || '')
  const backgroundStyle = computed(() => ({
    backgroundImage: `linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('${backgroundImage.value}')`,
    backgroundSize: 'cover',
    backgroundPosition: 'center'
  }))

  return {
    backgroundImage,
    backgroundStyle
  }
}
